<script lang="ts" setup>
import { reactive, onActivated } from 'vue'
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import { useRoute } from 'vue-router'
import { useActivated } from '@/hooks/useActivated'
import {
  queryUserInfoDetailOrderTableCol,
  queryUserInfoDetailOrderRequestData
} from '@/api/user/types/user'
import { PaymentType } from '@/types/enum'
import dayjs from 'dayjs'
import { queryUserInfoDetailOrder } from '@/api/user'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'

defineOptions({
  name: 'RefundRecord'
})
const route = useRoute()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: '',
  orderId: '',
  type: '',
  selectType: 'refund'
})
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
const changeAccountType = (val: PaymentType) => {
  if (val == 'Alipay') {
    return '支付宝'
  } else if (val == 'WeChat') {
    return '微信'
  } else {
    return '其他'
  }
}
/** 处理是否缓存 */
onActivated(() => {
  form.phone = (route.query.phone as string) || ''
  form.orderId = (route.query.orderId as string) || ''
  form.selectType = (route.query.selectType as string) || ''
  form.type = (route.query.type as string) || ''
})
useActivated(
  form,
  { form },
  [
    { key: 'phone', path: 'form.phone' },
    { key: 'selectType', path: 'form.selectType' },
    { key: 'type', path: 'form.type' },
    { key: 'orderId', path: 'form.orderId' }
  ],
  load,
  []
)
</script>

<template>
  <div class="xy-container">
    <user-info-form v-model="form" type="refund" @search="handleFormSearch">
      <template #select>
        <el-form-item prop="type" label="退款类型">
          <el-select v-model="form.type" style="width: 150px">
            <el-option value="" label="不限" />
            <el-option value="BikeLongTerm" label="车辆长租" />
            <el-option value="BikeTermTerm" label="车辆短租" />
            <el-option value="ChangeBattery" label="换电套餐" />
            <el-option value="BatteryActivity" label="电池套餐" />
            <el-option value="BatteryTimesCard" label="电池次卡" />
            <el-option value="BikeOverdue" label="租车逾期" />
            <el-option value="BatteryOverdue" label="电池逾期" />
            <el-option value="BatteryRerent" label="电池续租" />
            <el-option value="BikeRerent" label="车辆续租" />
            <el-option value="BikeOverdueRerent" label="租车逾期续租" />
            <el-option value="BatteryOverdueRerent" label="电池逾期续租" />
            <el-option value="bikeModified" label="中控线材(车辆改装)" />
            <el-option value="Battery" label="电池购买" />
          </el-select>
        </el-form-item>
      </template>
    </user-info-form>
    <el-table v-loading="loading" :data="data" class="no-border">
      <el-table-column prop="phone" label="手机号" min-width="150" align="center" />
      <el-table-column prop="orderId" label="充值订单号" min-width="250" align="center" />
      <el-table-column prop="refundType" label="退款类型" min-width="150" align="center" />
      <el-table-column prop="refundAmount" label="退款金额" align="center" />
      <el-table-column prop="accountType" label="退款路径" align="center">
        <template #default="scope">
          <span>{{ changeAccountType(scope.row.accountType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundOrderId" label="退款订单号" min-width="250" align="center" />
      <el-table-column prop="refundTime" label="退款时间" min-width="200" align="center">
        <template #default="scope">
          <span>{{ dayjs(scope.row.refundTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="reason"
        label="退款原因"
        show-overflow-tooltip
        min-width="200"
        align="center"
      />
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
